रिएक्ट कस्टम हुक कंपोजिशन: जटिल लॉजिक एब्स्ट्रैक्शन में महारत हासिल करना

रिएक्ट कस्टम हुक आपके रिएक्ट एप्लिकेशन में स्टेटफुल लॉजिक को समाहित करने और उसका पुन: उपयोग करने के लिए एक शक्तिशाली उपकरण हैं। हालाँकि, जैसे-जैसे आपके एप्लिकेशन की जटिलता बढ़ती है, वैसे-वैसे आपके कस्टम हुक के भीतर का लॉजिक भी बढ़ता है। इससे मोनोलिथिक हुक बन सकते हैं जिन्हें समझना, परीक्षण करना और बनाए रखना मुश्किल होता है। कस्टम हुक कंपोजिशन इस समस्या का समाधान प्रदान करता है, जिससे आप जटिल लॉजिक को छोटे, अधिक प्रबंधनीय और पुन: प्रयोज्य हुक में तोड़ सकते हैं।

कस्टम हुक कंपोजिशन क्या है?

कस्टम हुक कंपोजिशन अधिक जटिल कार्यक्षमता बनाने के लिए कई छोटे कस्टम हुक को संयोजित करने का अभ्यास है। एक ही, बड़े हुक बनाने के बजाय जो सब कुछ संभालता है, आप कई छोटे हुक बनाते हैं, जिनमें से प्रत्येक लॉजिक के एक विशिष्ट पहलू के लिए जिम्मेदार होता है। फिर इन छोटे हुक को वांछित कार्यक्षमता प्राप्त करने के लिए एक साथ कंपोज किया जा सकता है।

इसे लेगो ईंटों से निर्माण की तरह समझें। प्रत्येक ईंट (छोटा हुक) का एक विशिष्ट कार्य होता है, और आप उन्हें जटिल संरचनाओं (बड़ी सुविधाएँ) के निर्माण के लिए विभिन्न तरीकों से जोड़ते हैं।

कस्टम हुक कंपोजिशन के लाभ

• बेहतर कोड पुन: प्रयोज्यता: छोटे, अधिक केंद्रित हुक स्वाभाविक रूप से विभिन्न घटकों और यहां तक कि विभिन्न परियोजनाओं में अधिक पुन: प्रयोज्य होते हैं।
• बढ़ी हुई रखरखाव क्षमता: जटिल लॉजिक को छोटी, स्व-निहित इकाइयों में तोड़ने से आपके कोड को समझना, डीबग करना और संशोधित करना आसान हो जाता है। एक हुक में किए गए परिवर्तनों से आपके एप्लिकेशन के अन्य हिस्सों के प्रभावित होने की संभावना कम होती है।
• बढ़ी हुई परीक्षण क्षमता: छोटे हुक को अलगाव में परीक्षण करना आसान होता है, जिससे अधिक मजबूत और विश्वसनीय कोड बनता है।
• बेहतर कोड संगठन: कंपोजिशन एक अधिक मॉड्यूलर और संगठित कोडबेस को प्रोत्साहित करता है, जिससे आपके एप्लिकेशन के विभिन्न भागों के बीच संबंधों को नेविगेट करना और समझना आसान हो जाता है।
• कोड दोहराव में कमी: सामान्य लॉजिक को पुन: प्रयोज्य हुक में निकालकर, आप कोड दोहराव को कम करते हैं, जिससे एक अधिक संक्षिप्त और रखरखाव योग्य कोडबेस बनता है।

कस्टम हुक कंपोजिशन का उपयोग कब करें

आपको कस्टम हुक कंपोजिशन का उपयोग करने पर विचार करना चाहिए जब:

• एक एकल कस्टम हुक बहुत बड़ा और जटिल हो रहा हो।
• आप खुद को कई कस्टम हुक या घटकों में समान लॉजिक दोहराते हुए पाते हैं।
• आप अपने कस्टम हुक की परीक्षण क्षमता में सुधार करना चाहते हैं।
• आप एक अधिक मॉड्यूलर और पुन: प्रयोज्य कोडबेस बनाना चाहते हैं।

कस्टम हुक कंपोजिशन के मूल सिद्धांत

यहाँ कुछ प्रमुख सिद्धांत दिए गए हैं जो कस्टम हुक कंपोजिशन के प्रति आपके दृष्टिकोण का मार्गदर्शन करेंगे:

• एकल जिम्मेदारी सिद्धांत: प्रत्येक कस्टम हुक की एक एकल, अच्छी तरह से परिभाषित जिम्मेदारी होनी चाहिए। यह उन्हें समझने, परीक्षण करने और पुन: उपयोग करने में आसान बनाता है।
• चिंताओं का पृथक्करण: अपने लॉजिक के विभिन्न पहलुओं को अलग-अलग हुक में अलग करें। उदाहरण के लिए, आपके पास डेटा लाने के लिए एक हुक, स्टेट के प्रबंधन के लिए दूसरा और साइड इफेक्ट्स को संभालने के लिए तीसरा हुक हो सकता है।
• कंपोजिबिलिटी: अपने हुक को इस तरह से डिज़ाइन करें कि उन्हें अन्य हुक के साथ आसानी से कंपोज किया जा सके। इसमें अक्सर डेटा या फ़ंक्शन लौटाना शामिल होता है जिनका उपयोग अन्य हुक द्वारा किया जा सकता है।
• नामकरण परंपराएं: अपने हुक के उद्देश्य और कार्यक्षमता को इंगित करने के लिए स्पष्ट और वर्णनात्मक नामों का उपयोग करें। एक सामान्य परंपरा हुक नामों को `use` के साथ उपसर्ग करना है।

सामान्य कंपोजिशन पैटर्न

कस्टम हुक को कंपोज करने के लिए कई पैटर्न का उपयोग किया जा सकता है। यहाँ कुछ सबसे आम हैं:

1. सरल हुक कंपोजिशन

यह कंपोजिशन का सबसे बुनियादी रूप है, जहाँ एक हुक बस दूसरे हुक को कॉल करता है और उसके रिटर्न मान का उपयोग करता है।

उदाहरण: कल्पना कीजिए कि आपके पास उपयोगकर्ता डेटा लाने के लिए एक हुक है और दूसरा दिनांकों को प्रारूपित करने के लिए है। आप इन हुक को कंपोज करके एक नया हुक बना सकते हैं जो उपयोगकर्ता डेटा लाता है और उपयोगकर्ता की पंजीकरण तिथि को प्रारूपित करता है।

            
import { useState, useEffect } from 'react';

function useUserData(userId) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  return { data, loading, error };
}

function useFormattedDate(dateString) {
  try {
    const date = new Date(dateString);
    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
    return formattedDate;
  } catch (error) {
    console.error("Error formatting date:", error);
    return "Invalid Date";
  }
}

function useUserWithFormattedDate(userId) {
  const { data, loading, error } = useUserData(userId);
  const formattedRegistrationDate = data ? useFormattedDate(data.registrationDate) : null;

  return { ...data, formattedRegistrationDate, loading, error };
}

export default useUserWithFormattedDate;

            

              
                Copy
              
            
          

स्पष्टीकरण:

• useUserData एक एपीआई से उपयोगकर्ता डेटा लाता है।
• useFormattedDate एक दिनांक स्ट्रिंग को उपयोगकर्ता के अनुकूल प्रारूप में प्रारूपित करता है। यह संभावित दिनांक पार्सिंग त्रुटियों को शालीनता से संभालता है। `toLocaleDateString` में `undefined` तर्क स्वरूपण के लिए उपयोगकर्ता के लोकेल का उपयोग करता है।
• useUserWithFormattedDate दोनों हुक को कंपोज करता है। यह पहले उपयोगकर्ता डेटा लाने के लिए useUserData का उपयोग करता है। फिर, यदि डेटा उपलब्ध है, तो यह registrationDate को प्रारूपित करने के लिए useFormattedDate का उपयोग करता है। अंत में, यह मूल उपयोगकर्ता डेटा के साथ प्रारूपित दिनांक, लोडिंग स्थिति और किसी भी संभावित त्रुटि को लौटाता है।

2. साझा स्टेट के साथ हुक कंपोजिशन

इस पैटर्न में, कई हुक एक ही स्टेट को साझा और संशोधित करते हैं। यह useContext का उपयोग करके या हुक के बीच स्टेट और सेटर फ़ंक्शन पास करके प्राप्त किया जा सकता है।

उदाहरण: एक बहु-चरणीय फॉर्म बनाने की कल्पना करें। प्रत्येक चरण का अपना हुक हो सकता है जो चरण के विशिष्ट इनपुट फ़ील्ड और सत्यापन लॉजिक का प्रबंधन करता है, लेकिन वे सभी useReducer और useContext का उपयोग करके एक पैरेंट हुक द्वारा प्रबंधित एक सामान्य फॉर्म स्टेट साझा करते हैं।

            
import React, { createContext, useContext, useReducer } from 'react';

// Define the initial state
const initialState = {
  step: 1,
  name: '',
  email: '',
  address: ''
};

// Define the actions
const ACTIONS = {
  NEXT_STEP: 'NEXT_STEP',
  PREVIOUS_STEP: 'PREVIOUS_STEP',
  UPDATE_FIELD: 'UPDATE_FIELD'
};

// Create the reducer
function formReducer(state, action) {
  switch (action.type) {
    case ACTIONS.NEXT_STEP:
      return { ...state, step: state.step + 1 };
    case ACTIONS.PREVIOUS_STEP:
      return { ...state, step: state.step - 1 };
    case ACTIONS.UPDATE_FIELD:
      return { ...state, [action.payload.field]: action.payload.value };
    default:
      return state;
  }
}

// Create the context
const FormContext = createContext();

// Create a provider component
function FormProvider({ children }) {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const value = {
    state,
    dispatch,
    nextStep: () => dispatch({ type: ACTIONS.NEXT_STEP }),
    previousStep: () => dispatch({ type: ACTIONS.PREVIOUS_STEP }),
    updateField: (field, value) => dispatch({ type: ACTIONS.UPDATE_FIELD, payload: { field, value } })
  };

  return (
    
      {children}
    
  );
}

// Custom hook for accessing the form context
function useFormContext() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext must be used within a FormProvider');
  }
  return context;
}

// Custom hook for Step 1
function useStep1() {
  const { state, updateField } = useFormContext();

  const updateName = (value) => updateField('name', value);

  return {
    name: state.name,
    updateName
  };
}

// Custom hook for Step 2
function useStep2() {
  const { state, updateField } = useFormContext();

  const updateEmail = (value) => updateField('email', value);

  return {
    email: state.email,
    updateEmail
  };
}

// Custom hook for Step 3
function useStep3() {
  const { state, updateField } = useFormContext();

  const updateAddress = (value) => updateField('address', value);

  return {
    address: state.address,
    updateAddress
  };
}

export { FormProvider, useFormContext, useStep1, useStep2, useStep3 };

            

              
                Copy
              
            
          

स्पष्टीकरण:

• एक FormContext को createContext का उपयोग करके बनाया गया है ताकि फॉर्म स्टेट और डिस्पैच फ़ंक्शन को रखा जा सके।
• एक formReducer useReducer का उपयोग करके फॉर्म स्टेट अपडेट का प्रबंधन करता है। स्टेट को संशोधित करने के लिए NEXT_STEP, PREVIOUS_STEP, और UPDATE_FIELD जैसी क्रियाएं परिभाषित की गई हैं।
• FormProvider कंपोनेंट अपने बच्चों को फॉर्म संदर्भ प्रदान करता है, जिससे स्टेट और डिस्पैच फॉर्म के सभी चरणों के लिए उपलब्ध हो जाते हैं। यह क्रियाओं को डिस्पैच करने को सरल बनाने के लिए `nextStep`, `previousStep`, और `updateField` के लिए सहायक फ़ंक्शन भी उजागर करता है।
• useFormContext हुक घटकों को फॉर्म संदर्भ मानों तक पहुंचने की अनुमति देता है।
• प्रत्येक चरण (useStep1, useStep2, useStep3) अपने चरण से संबंधित इनपुट का प्रबंधन करने के लिए अपना हुक बनाता है और स्टेट और डिस्पैच फ़ंक्शन प्राप्त करने के लिए useFormContext का उपयोग करता है। प्रत्येक चरण केवल उस चरण से संबंधित डेटा और फ़ंक्शन को उजागर करता है, एकल जिम्मेदारी सिद्धांत का पालन करता है।

3. लाइफसाइकिल मैनेजमेंट के साथ हुक कंपोजिशन

इस पैटर्न में ऐसे हुक शामिल हैं जो एक घटक के जीवनचक्र के विभिन्न चरणों का प्रबंधन करते हैं, जैसे कि माउंटिंग, अपडेटिंग और अनमाउंटिंग। यह अक्सर कंपोज्ड हुक के भीतर useEffect का उपयोग करके प्राप्त किया जाता है।

उदाहरण: एक ऐसे घटक पर विचार करें जिसे ऑनलाइन/ऑफलाइन स्थिति को ट्रैक करने की आवश्यकता है और जब यह अनमाउंट होता है तो कुछ सफाई करने की भी आवश्यकता होती है। आप इनमें से प्रत्येक कार्य के लिए अलग-अलग हुक बना सकते हैं और फिर उन्हें कंपोज कर सकते हैं।

            
import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;

    return () => {
      document.title = 'Original Title'; // Revert to a default title on unmount
    };
  }, [title]);
}

function useAppLifecycle(title) {
  const isOnline = useOnlineStatus();
  useDocumentTitle(title);

  return isOnline; // Return the online status
}

export { useAppLifecycle, useOnlineStatus, useDocumentTitle };

            

              
                Copy
              
            
          

स्पष्टीकरण:

• useOnlineStatus online और offline इवेंट्स का उपयोग करके उपयोगकर्ता की ऑनलाइन स्थिति को ट्रैक करता है। useEffect हुक जब कंपोनेंट माउंट होता है तो इवेंट श्रोताओं को सेट करता है और जब यह अनमाउंट होता है तो उन्हें साफ करता है।
• useDocumentTitle दस्तावेज़ के शीर्षक को अपडेट करता है। यह कंपोनेंट के अनमाउंट होने पर शीर्षक को एक डिफ़ॉल्ट मान पर वापस भी कर देता है, जिससे शीर्षक की कोई भी समस्या न रहे।
• useAppLifecycle दोनों हुक को कंपोज करता है। यह यह निर्धारित करने के लिए useOnlineStatus का उपयोग करता है कि उपयोगकर्ता ऑनलाइन है या नहीं और दस्तावेज़ शीर्षक सेट करने के लिए useDocumentTitle का उपयोग करता है। संयुक्त हुक ऑनलाइन स्थिति लौटाता है।

व्यावहारिक उदाहरण और उपयोग के मामले

1. अंतर्राष्ट्रीयकरण (i18n)

अनुवाद और लोकेल स्विचिंग का प्रबंधन जटिल हो सकता है। आप चिंताओं को अलग करने के लिए हुक कंपोजिशन का उपयोग कर सकते हैं:

• useLocale(): वर्तमान लोकेल का प्रबंधन करता है।
• useTranslations(): वर्तमान लोकेल के लिए अनुवाद लाता है और प्रदान करता है।
• useTranslate(key): एक हुक जो एक अनुवाद कुंजी लेता है और अनुवादित स्ट्रिंग लौटाता है, अनुवादों तक पहुंचने के लिए useTranslations हुक का उपयोग करता है।

यह आपको आसानी से लोकेल स्विच करने और अपने पूरे एप्लिकेशन में अनुवादों तक पहुंचने की अनुमति देता है। अनुवाद लॉजिक के प्रबंधन के लिए कस्टम हुक के साथ i18next जैसी पुस्तकालयों का उपयोग करने पर विचार करें। उदाहरण के लिए, useTranslations विभिन्न भाषाओं में JSON फ़ाइलों से चयनित लोकेल के आधार पर अनुवाद लोड कर सकता है।

2. फॉर्म वैलिडेशन

जटिल फॉर्मों को अक्सर व्यापक सत्यापन की आवश्यकता होती है। आप पुन: प्रयोज्य सत्यापन लॉजिक बनाने के लिए हुक कंपोजिशन का उपयोग कर सकते हैं:

• useInput(initialValue): एक एकल इनपुट फ़ील्ड की स्थिति का प्रबंधन करता है।
• useValidator(value, rules): नियमों के एक सेट के आधार पर एक एकल इनपुट फ़ील्ड को मान्य करता है (उदाहरण के लिए, आवश्यक, ईमेल, minLength)।
• useForm(fields): प्रत्येक फ़ील्ड के लिए useInput और useValidator को कंपोज करके, पूरे फॉर्म की स्थिति और सत्यापन का प्रबंधन करता है।

यह दृष्टिकोण कोड पुन: प्रयोज्यता को बढ़ावा देता है और सत्यापन नियमों को जोड़ना या संशोधित करना आसान बनाता है। Formik या React Hook Form जैसी लाइब्रेरी पहले से बने समाधान प्रदान करती हैं लेकिन विशिष्ट सत्यापन आवश्यकताओं के लिए कस्टम हुक के साथ संवर्धित की जा सकती हैं।

3. डेटा फ़ेचिंग और कैशिंग

डेटा फ़ेचिंग, कैशिंग और त्रुटि प्रबंधन को हुक कंपोजिशन के साथ सरल बनाया जा सकता है:

• useFetch(url): दिए गए URL से डेटा लाता है।
• useCache(key, fetchFunction): एक कुंजी का उपयोग करके फ़ेच फ़ंक्शन के परिणाम को कैश करता है।
• useData(url, options): डेटा लाने और परिणामों को कैश करने के लिए useFetch और useCache को जोड़ता है।

यह आपको अक्सर एक्सेस किए जाने वाले डेटा को आसानी से कैश करने और प्रदर्शन में सुधार करने की अनुमति देता है। SWR (Stale-While-Revalidate) और React Query जैसी लाइब्रेरी शक्तिशाली डेटा फ़ेचिंग और कैशिंग समाधान प्रदान करती हैं जिन्हें कस्टम हुक के साथ बढ़ाया जा सकता है।

4. प्रमाणीकरण (Authentication)

प्रमाणीकरण लॉजिक को संभालना जटिल हो सकता है, खासकर जब विभिन्न प्रमाणीकरण विधियों (जैसे, JWT, OAuth) से निपटना हो। हुक कंपोजिशन प्रमाणीकरण प्रक्रिया के विभिन्न पहलुओं को अलग करने में मदद कर सकता है:

• useAuthToken(): प्रमाणीकरण टोकन का प्रबंधन करता है (उदाहरण के लिए, इसे स्थानीय भंडारण से संग्रहीत और पुनर्प्राप्त करना)।
• useUser(): प्रमाणीकरण टोकन के आधार पर वर्तमान उपयोगकर्ता की जानकारी लाता है और प्रदान करता है।
• useAuth(): प्रमाणीकरण-संबंधित कार्य जैसे लॉगिन, लॉगआउट और साइनअप प्रदान करता है, अन्य हुक को कंपोज करता है।

यह दृष्टिकोण आपको आसानी से विभिन्न प्रमाणीकरण विधियों के बीच स्विच करने या प्रमाणीकरण प्रक्रिया में नई सुविधाएँ जोड़ने की अनुमति देता है। Auth0 और Firebase Authentication जैसी लाइब्रेरी का उपयोग उपयोगकर्ता खातों और प्रमाणीकरण के प्रबंधन के लिए बैकएंड के रूप में किया जा सकता है, और इन सेवाओं के साथ बातचीत करने के लिए कस्टम हुक बनाए जा सकते हैं।

कस्टम हुक कंपोजिशन के लिए सर्वोत्तम अभ्यास

• हुक को केंद्रित रखें: प्रत्येक हुक का एक स्पष्ट और विशिष्ट उद्देश्य होना चाहिए।
• गहरी नेस्टिंग से बचें: अपने कोड को समझने में मुश्किल बनाने से बचने के लिए कंपोजिशन के स्तरों की संख्या को सीमित करें। यदि कोई हुक बहुत जटिल हो जाता है, तो उसे और तोड़ने पर विचार करें।
• अपने हुक को दस्तावेजित करें: प्रत्येक हुक के लिए स्पष्ट और संक्षिप्त दस्तावेज़ीकरण प्रदान करें, इसके उद्देश्य, इनपुट और आउटपुट की व्याख्या करें। यह उन हुक के लिए विशेष रूप से महत्वपूर्ण है जिनका उपयोग अन्य डेवलपर्स द्वारा किया जाता है।
• अपने हुक का परीक्षण करें: प्रत्येक हुक के लिए यूनिट परीक्षण लिखें ताकि यह सुनिश्चित हो सके कि यह सही ढंग से काम कर रहा है। यह उन हुक के लिए विशेष रूप से महत्वपूर्ण है जो स्टेट का प्रबंधन करते हैं या साइड इफेक्ट्स करते हैं।
• एक स्टेट मैनेजमेंट लाइब्रेरी का उपयोग करने पर विचार करें: जटिल स्टेट मैनेजमेंट परिदृश्यों के लिए, Redux, Zustand, या Jotai जैसी लाइब्रेरी का उपयोग करने पर विचार करें। ये लाइब्रेरी स्टेट के प्रबंधन के लिए अधिक उन्नत सुविधाएँ प्रदान करती हैं और हुक के कंपोजिशन को सरल बना सकती हैं।
• त्रुटि प्रबंधन के बारे में सोचें: अप्रत्याशित व्यवहार को रोकने के लिए अपने हुक में मजबूत त्रुटि प्रबंधन लागू करें। त्रुटियों को पकड़ने और जानकारीपूर्ण त्रुटि संदेश प्रदान करने के लिए ट्राई-कैच ब्लॉक का उपयोग करने पर विचार करें।
• प्रदर्शन पर विचार करें: अपने हुक के प्रदर्शन निहितार्थों के प्रति सचेत रहें। अनावश्यक री-रेंडर से बचें और अपने कोड को प्रदर्शन के लिए अनुकूलित करें। जहां उपयुक्त हो प्रदर्शन को अनुकूलित करने के लिए React.memo, useMemo, और useCallback का उपयोग करें।

निष्कर्ष

रिएक्ट कस्टम हुक कंपोजिशन जटिल लॉजिक को एब्स्ट्रैक्ट करने और कोड पुन: प्रयोज्यता, रखरखाव और परीक्षण क्षमता में सुधार के लिए एक शक्तिशाली तकनीक है। जटिल कार्यों को छोटे, अधिक प्रबंधनीय हुक में तोड़कर, आप एक अधिक मॉड्यूलर और संगठित कोडबेस बना सकते हैं। इस लेख में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप मजबूत और स्केलेबल रिएक्ट एप्लिकेशन बनाने के लिए कस्टम हुक कंपोजिशन का प्रभावी ढंग से लाभ उठा सकते हैं। अपने कोड में हमेशा स्पष्टता और सरलता को प्राथमिकता देना याद रखें, और अपनी विशिष्ट आवश्यकताओं के लिए सबसे अच्छा काम करने वाले विभिन्न कंपोजिशन पैटर्न के साथ प्रयोग करने से न डरें।